// import Empty from '@/components/Empty';
// import { Flex } from 'antd';
import { FC } from 'react';
import { useIntl } from 'umi';
import { InfoBlock } from '../../components/InfoBlock';
import { InfoField } from '../../components/InfoField';
import { useDict } from '../../SelectedDeviceNodeContext';
interface IProps {
  data: API.ApiResultAreaRealtimeDTO['data'];
}

export const Info: FC<IProps> = ({ data }) => {
  // if (!data) {
  //   return (
  //     <Flex justify="center" style={{ width: '100%' }}>
  //       <Empty />
  //     </Flex>
  //   );
  // }

  //  /** 充放电状态：0-静置；1-充电；2-放电 */
  //  chargeState?: string;
  //  /** 在线状态 */
  //  onlineState?: string;
  //  /** 运行状态：0-故障；1-运行；2-调试 */

  const { chargeDischargeStatusOptions } = useDict();
  let chargeStatusLabel = data?.realtimeDTO?.chargeState;

  if (chargeDischargeStatusOptions && chargeDischargeStatusOptions.length) {
    let arr = chargeDischargeStatusOptions.filter(
      (res) => String(res?.value) === String(data?.realtimeDTO?.chargeState),
    );
    if (arr.length > 0) {
      chargeStatusLabel = arr[0]?.label;
    }
  }

  const intl = useIntl();

  const stateItems = [
    { label: intl.formatMessage({ id: 'data.chargeDischargeStatus' }), value: chargeStatusLabel },
    { label: 'SOC(%)', value: data?.realtimeDTO?.stationSoc, unit: '%' },
    {
      label: intl.formatMessage({ id: 'statistics.work.work' }),
      value: data?.realtimeDTO?.runStatus,
    },
  ];

  const powerInfoitems = [
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalSPower' }),
      value: data?.realtimeDTO?.essPower,
      unit: '(kW)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.powerOfPoC' }),
      value: data?.realtimeDTO?.pocPower,
      unit: '(kW)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.loadPower' }),
      value: data?.realtimeDTO?.loadPower,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.maxChargePower' }),
      value: data?.realtimeDTO?.maxChargePower,
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.maxDischargePower' }),
      value: data?.realtimeDTO?.maxDischargePower,
      unit: '(kWh)',
    },
  ];

  const items = [
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalCharge' }),
      value: data?.realtimeDTO?.chargeEnergy,
      key: 'chargeEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalDischarge' }),
      value: data?.realtimeDTO?.disChargeEnergy,
      key: 'disChargeEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dayCharge' }),
      value: data?.realtimeDTO?.dailyChargeEnergy,
      key: 'dailyChargeEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dayDischarge' }),
      value: data?.realtimeDTO?.dailyDisChargeEnergy,
      key: 'dailyDisChargeEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalOnGridEnergy' }),
      value: data?.realtimeDTO?.pocOnGridEnergy,
      key: 'pocOnEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalOffGridEnergy' }),
      value: data?.realtimeDTO?.pocOffGridEnergy,
      key: 'pocOffEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dailyOnGridEnergy' }),
      value: data?.realtimeDTO?.dailyPocOnEnergy,
      key: 'dailyPocOnEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dailyOffGridEnergy' }),
      value: data?.realtimeDTO?.dailyPocOffEnergy,
      key: 'dailyPocOffEnergy',
      unit: '(kWh)',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.totalRevenues' }),
      value: data?.realtimeDTO?.income,
      unit: '万元',
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.dayRevenue' }),
      value: data?.realtimeDTO?.dailyIncome,
      unit: '万元',
    },
    // { label: '充放电状态', value: data.chargeStatus },
    // { label: '工况', value: data.workStatus },
    // { label: 'SOC', value: data.soc, unit: '%' },
    // { label: '实时储能有功', value: data.realTimeEnergy, unit: 'kW' },
    // { label: '并网点功率', value: data.gridConnectionPower, unit: 'kW' },
    // { label: '最大可充功率', value: data.maxChargePower, unit: 'kW' },
    // { label: '最大可放功率', value: data.maxDischargePower, unit: 'kW' },
    // { label: '负载功率', value: data.loadPower, unit: 'kW' },
  ];

  // if (data.pvPower !== undefined) {
  //   items.push({ label: '光伏功率', value: data.pvPower, unit: 'kW' });
  // }

  // if (data.chargingPilePower !== undefined) {
  //   items.push({ label: '充电桩功率', value: data.chargingPilePower, unit: 'kW' });
  // }

  return (
    <div style={{ padding: '20px 30px', marginBottom: 0 }}>
      <InfoBlock title={intl.formatMessage({ id: 'stationRealtimeMonitoring.statusInfo' })}>
        {stateItems.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} />
        ))}
      </InfoBlock>
      <InfoBlock title={intl.formatMessage({ id: 'stationRealtimeMonitoring.powerInfo' })}>
        {powerInfoitems.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} unit={item.unit} />
        ))}
      </InfoBlock>
      <InfoBlock
        title={intl.formatMessage({ id: 'stationRealtimeMonitoring.electricityInformation' })}
      >
        {items.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} unit={item.unit} />
        ))}
      </InfoBlock>
    </div>
  );
};
